<template>
  <div class="admin-layout" :class="{ 'dark-mode': darkMode }">
    <!-- 移动端遮罩 -->
    <div 
      v-if="showMask" 
      class="sidebar-mask"
      @click="closeSidebar"
    ></div>
    
    <!-- 侧边栏 -->
    <aside class="admin-sidebar" :class="{ collapsed: sidebarCollapsed }">
      <div class="sidebar-header">
        <div class="logo-container">
          <img src="/favicon.ico" alt="Logo" class="logo" v-if="!sidebarCollapsed" />
          <img src="/favicon.ico" alt="Logo" class="logo-mini" v-else />
          <h1 v-if="!sidebarCollapsed" class="app-title">Admin2025</h1>
        </div>
      </div>
      
      <nav class="sidebar-nav">
        <el-menu
          :default-active="activeMenu"
          :collapse="sidebarCollapsed"
          :unique-opened="true"
          router
          background-color="#2c3e50"
          text-color="#ecf0f1"
          active-text-color="#3498db"
        >
          <!-- 仪表盘 -->
          <el-sub-menu index="dashboard">
            <template #title>
              <el-icon><House /></el-icon>
              <span>仪表盘</span>
            </template>
            <el-menu-item index="/dashboard">概览</el-menu-item>
            <el-menu-item index="/dashboard/analysis">分析页</el-menu-item>
            <el-menu-item index="/dashboard/monitor">监控页</el-menu-item>
          </el-sub-menu>

          <!-- 模板中心 -->
          <el-sub-menu index="template">
            <template #title>
              <el-icon><Grid /></el-icon>
              <span>模板中心</span>
            </template>
            <el-menu-item index="/template/list">模板列表</el-menu-item>
            <el-menu-item index="/template/create">创建模板</el-menu-item>
          </el-sub-menu>

          <!-- 组件中心 -->
          <el-sub-menu index="component">
            <template #title>
              <el-icon><Operation /></el-icon>
              <span>组件中心</span>
            </template>
            <el-menu-item index="/component/basic">基础组件</el-menu-item>
            <el-menu-item index="/component/advanced">高级组件</el-menu-item>
            <el-menu-item index="/component/charts">图表组件</el-menu-item>
            <el-menu-item index="/component/icons">图标组件</el-menu-item>
          </el-sub-menu>

          <!-- 功能示例 -->
          <el-sub-menu index="examples">
            <template #title>
              <el-icon><Promotion /></el-icon>
              <span>功能示例</span>
            </template>
            <el-menu-item index="/examples/forms">表单示例</el-menu-item>
            <el-menu-item index="/examples/tables">表格示例</el-menu-item>
            <el-menu-item index="/examples/charts">图表示例</el-menu-item>
            <el-menu-item index="/examples/flow">流程示例</el-menu-item>
          </el-sub-menu>

          <!-- 系统管理 -->
          <el-sub-menu index="system">
            <template #title>
              <el-icon><Setting /></el-icon>
              <span>系统管理</span>
            </template>
            <el-menu-item index="/system/users">用户管理</el-menu-item>
            <el-menu-item index="/system/roles">角色管理</el-menu-item>
            <el-menu-item index="/system/permissions">权限管理</el-menu-item>
            <el-menu-item index="/system/settings">系统设置</el-menu-item>
          </el-sub-menu>

          <!-- 文章管理 -->
          <el-sub-menu index="article">
            <template #title>
              <el-icon><EditPen /></el-icon>
              <span>文章管理</span>
            </template>
            <el-menu-item index="/article/list">文章列表</el-menu-item>
            <el-menu-item index="/article/create">创建文章</el-menu-item>
            <el-menu-item index="/article/categories">分类管理</el-menu-item>
            <el-menu-item index="/article/tags">标签管理</el-menu-item>
          </el-sub-menu>

          <!-- 结果页面 -->
          <el-sub-menu index="result">
            <template #title>
              <el-icon><CircleCheck /></el-icon>
              <span>结果页面</span>
            </template>
            <el-menu-item index="/result/success">成功页</el-menu-item>
            <el-menu-item index="/result/fail">失败页</el-menu-item>
            <el-menu-item index="/result/404">404页面</el-menu-item>
            <el-menu-item index="/result/403">403页面</el-menu-item>
            <el-menu-item index="/result/500">500页面</el-menu-item>
          </el-sub-menu>

          <!-- 异常页面 -->
          <el-sub-menu index="exception">
            <template #title>
              <el-icon><Warning /></el-icon>
              <span>异常页面</span>
            </template>
            <el-menu-item index="/exception/403">403</el-menu-item>
            <el-menu-item index="/exception/404">404</el-menu-item>
            <el-menu-item index="/exception/500">500</el-menu-item>
          </el-sub-menu>

          <!-- 运维管理 -->
          <el-sub-menu index="devops">
            <template #title>
              <el-icon><Tools /></el-icon>
              <span>运维管理</span>
            </template>
            <el-menu-item index="/devops/logs">系统日志</el-menu-item>
            <el-menu-item index="/devops/monitor">系统监控</el-menu-item>
            <el-menu-item index="/devops/backup">数据备份</el-menu-item>
          </el-sub-menu>

          <!-- 帮助中心 -->
          <el-sub-menu index="help">
            <template #title>
              <el-icon><InfoFilled /></el-icon>
              <span>帮助中心</span>
            </template>
            <el-menu-item index="/help/docs">使用文档</el-menu-item>
            <el-menu-item index="/help/faq">常见问题</el-menu-item>
            <el-menu-item index="/help/contact">联系我们</el-menu-item>
          </el-sub-menu>

          <!-- 更新日志 -->
          <el-menu-item index="/changelog">
            <el-icon><Calendar /></el-icon>
            <template #title>
              <span>更新日志</span>
            </template>
          </el-menu-item>
        </el-menu>
      </nav>
    </aside>
    
    <!-- 主要内容区域 -->
    <div class="admin-main" :class="{ 'sidebar-collapsed': sidebarCollapsed }">
      <!-- 顶部栏 -->
      <header class="admin-header">
        <div class="header-left">
          <!-- 菜单收缩按钮 -->
          <el-button 
            @click="toggleSidebar" 
            class="menu-toggle-btn"
            text
            size="large"
          >
            <template #icon>
              <svg class="menu-icon" :class="{ collapsed: sidebarCollapsed }" viewBox="0 0 24 24" width="18" height="18">
                <g class="menu-lines">
                  <rect class="line line-1" x="3" y="6" width="18" height="2" rx="1"/>
                  <rect class="line line-2" x="3" y="11" width="18" height="2" rx="1"/>
                  <rect class="line line-3" x="3" y="16" width="18" height="2" rx="1"/>
                </g>
              </svg>
            </template>
          </el-button>
          
          <el-breadcrumb separator="/" class="breadcrumb-nav">
            <el-breadcrumb-item 
              v-for="item in breadcrumbs" 
              :key="item.path"
              :to="item.path"
            >
              {{ item.title }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        
        <div class="header-right">
          <div class="header-actions">
            <el-input
              v-model="searchValue"
              placeholder="搜索"
              style="width: 200px; margin-right: 16px"
              :prefix-icon="Search"
              clearable
            />
            
            <!-- 深色模式切换按钮 -->
            <el-tooltip :content="darkMode ? '切换到浅色模式' : '切换到深色模式'" placement="bottom">
              <el-switch
                v-model="darkMode"
                :active-icon="Moon"
                :inactive-icon="Sunny"
                active-color="#667eea"
                inactive-color="#ddd"
                style="margin-right: 16px"
                @change="toggleDarkMode"
              />
            </el-tooltip>
            
            <el-tooltip content="Github" placement="bottom">
              <el-button :icon="Monitor" circle />
            </el-tooltip>
            
            <el-tooltip content="帮助文档" placement="bottom">
              <el-button :icon="QuestionFilled" circle />
            </el-tooltip>
            
            <el-button :icon="Bell" circle />
            
            <el-dropdown @command="handleUserCommand">
              <span class="user-dropdown">
                <el-avatar size="small" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face" />
                <span class="username">Admin</span>
                <el-icon><ArrowDown /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">
                    <el-icon><User /></el-icon>
                    个人中心
                  </el-dropdown-item>
                  <el-dropdown-item command="settings">
                    <el-icon><Setting /></el-icon>
                    设置
                  </el-dropdown-item>
                  <el-dropdown-item divided command="logout">
                    <el-icon><SwitchButton /></el-icon>
                    退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </header>
      
      <!-- 标签页导航 -->
      <div class="admin-tabs">
        <el-tabs
          v-model="activeTab"
          type="card"
          closable
          @tab-remove="removeTab"
          @tab-click="handleTabClick"
        >
          <el-tab-pane
            v-for="tab in tabs"
            :key="tab.name"
            :label="tab.title"
            :name="tab.name"
            :closable="tab.closable"
          />
        </el-tabs>
        
        <div class="tabs-actions">
          <el-dropdown @command="handleTabsCommand">
            <el-button :icon="ArrowDown" size="small" />
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="closeOthers">关闭其他</el-dropdown-item>
                <el-dropdown-item command="closeAll">关闭所有</el-dropdown-item>
                <el-dropdown-item command="refresh">刷新页面</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      
      <!-- 内容区域 -->
      <main class="admin-content">
        <router-view v-slot="{ Component }">
          <keep-alive :include="keepAliveComponents">
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </main>
    </div>
  </div>
</template>

<script>
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  House, Monitor, Document, Grid, View, CircleCheck, Warning, User,
  Fold, Expand, Search, QuestionFilled, Bell, ArrowDown,
  Setting, SwitchButton, Promotion, Operation, Management,
  Files, Tools, EditPen, InfoFilled, Calendar, Moon, Sunny
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'AdminLayout',
  components: {
    House, Monitor, Document, Grid, View, CircleCheck, Warning, User,
    Fold, Expand, Search, QuestionFilled, Bell, ArrowDown,
    Setting, SwitchButton, Promotion, Operation, Management,
    Files, Tools, EditPen, InfoFilled, Calendar, Moon, Sunny
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    
    const sidebarCollapsed = ref(false)
    const searchValue = ref('')
    const activeTab = ref('Dashboard')
    const isMobile = ref(false)
    const darkMode = ref(false)
    
    // 初始化深色模式状态
    const initDarkMode = () => {
      const savedDarkMode = localStorage.getItem('globalDarkMode')
      if (savedDarkMode) {
        darkMode.value = savedDarkMode === 'true'
      }
      applyDarkMode(darkMode.value)
    }
    
    // 应用深色模式
    const applyDarkMode = (isDark) => {
      if (isDark) {
        document.documentElement.classList.add('dark-mode')
        document.body.classList.add('dark-mode')
      } else {
        document.documentElement.classList.remove('dark-mode')
        document.body.classList.remove('dark-mode')
      }
    }
    
    // 切换深色模式
    const toggleDarkMode = (value) => {
      darkMode.value = value
      localStorage.setItem('globalDarkMode', value.toString())
      applyDarkMode(value)
      ElMessage.success(value ? '已切换到深色模式' : '已切换到浅色模式')
    }
    
    // 检查是否为移动设备
    const checkMobile = () => {
      isMobile.value = window.innerWidth <= 992
      if (isMobile.value) {
        sidebarCollapsed.value = true
      }
    }
    
    // 监听窗口大小变化
    const handleResize = () => {
      checkMobile()
    }
    
    // 是否显示遮罩
    const showMask = computed(() => {
      return isMobile.value && !sidebarCollapsed.value
    })
    
    // 默认标签页
    const tabs = ref([
      { name: 'Dashboard', title: '概览', path: '/dashboard', closable: false }
    ])
    
    // 需要保持活跃的组件
    const keepAliveComponents = ref(['Dashboard'])
    
    // 当前激活的菜单
    const activeMenu = computed(() => route.path)
    
    // 面包屑导航
    const breadcrumbs = computed(() => {
      const pathArray = route.path.split('/').filter(item => item)
      const crumbs = [{ title: '首页', path: '/' }]
      
      let currentPath = ''
      pathArray.forEach(item => {
        currentPath += `/${item}`
        const routeRecord = router.getRoutes().find(r => r.path === currentPath)
        if (routeRecord && routeRecord.meta?.title) {
          crumbs.push({
            title: routeRecord.meta.title,
            path: currentPath
          })
        }
      })
      
      return crumbs
    })
    
    // 切换侧边栏
    const toggleSidebar = () => {
      sidebarCollapsed.value = !sidebarCollapsed.value
    }
    
    // 关闭侧边栏（移动端点击遮罩时）
    const closeSidebar = () => {
      if (isMobile.value) {
        sidebarCollapsed.value = true
      }
    }
    
    // 添加标签页
    const addTab = (tab) => {
      const exists = tabs.value.find(t => t.name === tab.name)
      if (!exists) {
        tabs.value.push({
          ...tab,
          closable: true
        })
        keepAliveComponents.value.push(tab.name)
      }
      activeTab.value = tab.name
    }
    
    // 移除标签页
    const removeTab = (targetName) => {
      const tabIndex = tabs.value.findIndex(tab => tab.name === targetName)
      if (tabIndex === -1) return
      
      const nextTab = tabs.value[tabIndex + 1] || tabs.value[tabIndex - 1]
      if (targetName === activeTab.value && nextTab) {
        activeTab.value = nextTab.name
        router.push(nextTab.path)
      }
      
      tabs.value.splice(tabIndex, 1)
      keepAliveComponents.value = keepAliveComponents.value.filter(name => name !== targetName)
    }
    
    // 处理标签页点击
    const handleTabClick = (tab) => {
      const targetTab = tabs.value.find(t => t.name === tab.props.name)
      if (targetTab) {
        router.push(targetTab.path)
      }
    }
    
    // 处理标签页操作
    const handleTabsCommand = (command) => {
      switch (command) {
        case 'closeOthers':
          const current = tabs.value.find(tab => tab.name === activeTab.value)
          tabs.value = tabs.value.filter(tab => !tab.closable || tab.name === activeTab.value)
          keepAliveComponents.value = keepAliveComponents.value.filter(name => 
            name === activeTab.value || name === 'Dashboard'
          )
          break
        case 'closeAll':
          tabs.value = tabs.value.filter(tab => !tab.closable)
          keepAliveComponents.value = ['Dashboard']
          activeTab.value = 'Dashboard'
          router.push('/dashboard')
          break
        case 'refresh':
          location.reload()
          break
      }
    }
    
    // 处理用户操作
    const handleUserCommand = (command) => {
      switch (command) {
        case 'profile':
          router.push('/user/center')
          break
        case 'settings':
          router.push('/user/settings')
          break
        case 'logout':
          ElMessage.success('退出登录成功')
          // 这里可以添加登出逻辑
          break
      }
    }
    
    // 监听路由变化，自动添加标签页
    watch(
      () => route.path,
      (newPath) => {
        if (newPath && route.meta?.title) {
          const tabName = route.name || route.path.replace(/\//g, '_')
          addTab({
            name: tabName,
            title: route.meta.title,
            path: newPath
          })
        }
      },
      { immediate: true }
    )
    
    // 生命周期钩子
    onMounted(() => {
      checkMobile()
      initDarkMode()
      window.addEventListener('resize', handleResize)
    })
    
    onUnmounted(() => {
      window.removeEventListener('resize', handleResize)
    })
    
    return {
      sidebarCollapsed,
      searchValue,
      activeTab,
      tabs,
      keepAliveComponents,
      activeMenu,
      breadcrumbs,
      isMobile,
      showMask,
      darkMode,
      toggleSidebar,
      closeSidebar,
      removeTab,
      handleTabClick,
      handleTabsCommand,
      handleUserCommand,
      toggleDarkMode
    }
  }
}
</script>

<style scoped>
.admin-layout {
  display: flex;
  height: 100vh;
  width: 100vw;
  background: #f0f2f5;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
}

/* 移动端遮罩 */
.sidebar-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: none;
}

@media (max-width: 992px) {
  .sidebar-mask {
    display: block;
  }
}

/* 侧边栏样式 */
.admin-sidebar {
  width: 256px;
  min-width: 256px;
  background: #2c3e50;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 100;
}

.admin-sidebar.collapsed {
  width: 64px;
  min-width: 64px;
}

.sidebar-header {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-bottom: 1px solid #34495e;
  flex-shrink: 0;
  background: #2c3e50;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
}

.logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.logo-mini {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.app-title {
  color: #ecf0f1;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

:deep(.el-menu) {
  border: none;
  background: #2c3e50 !important;
}

:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
  height: 50px;
  line-height: 50px;
  font-size: 15px !important;
  color: #ecf0f1 !important;
}

:deep(.el-menu-item:hover),
:deep(.el-sub-menu__title:hover) {
  background-color: #34495e !important;
  color: #fff !important;
}

:deep(.el-menu-item.is-active) {
  background-color: #3498db !important;
  color: #fff !important;
}

:deep(.el-sub-menu .el-menu-item) {
  background-color: #34495e !important;
  font-size: 14px !important;
}

:deep(.el-sub-menu .el-menu-item:hover) {
  background-color: #3498db !important;
}

:deep(.el-icon) {
  font-size: 16px !important;
  margin-right: 8px;
}

/* 主要内容区域 */
.admin-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/* 顶部栏样式 */
.admin-header {
  height: 64px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  width: 100%;
  margin: 0;
}

.header-left {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 菜单收缩按钮样式 */
.menu-toggle-btn {
  color: #666;
  font-size: 16px;
  padding: 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
  background: rgba(64, 158, 255, 0.05);
  border: 1px solid rgba(64, 158, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.menu-toggle-btn:hover {
  color: #409eff;
  background: rgba(64, 158, 255, 0.1);
  border-color: rgba(64, 158, 255, 0.4);
  box-shadow: 0 4px 8px rgba(64, 158, 255, 0.2);
  transform: translateY(-1px);
}

/* 自定义SVG菜单图标 */
.menu-icon {
  transition: all 0.3s ease;
}

.menu-icon .menu-lines {
  transition: all 0.3s ease;
}

.menu-icon .line {
  fill: currentColor;
  transition: all 0.3s ease;
  transform-origin: center;
}

/* 收缩状态的动画效果 */
.menu-icon.collapsed .line-1 {
  transform: translateY(5px) rotate(45deg);
}

.menu-icon.collapsed .line-2 {
  opacity: 0;
  transform: scaleX(0);
}

.menu-icon.collapsed .line-3 {
  transform: translateY(-5px) rotate(-45deg);
}

/* 额外的视觉效果 */
.menu-toggle-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(64, 158, 255, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
  z-index: -1;
}

.menu-toggle-btn:hover::before {
  width: 40px;
  height: 40px;
}

.breadcrumb-nav {
  flex: 1;
}

.header-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notification-badge {
  margin-right: 8px;
}

.user-dropdown {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
  white-space: nowrap;
}

.user-dropdown:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.username {
  font-size: 14px;
  color: #333;
}

/* 标签页样式 */
.admin-tabs {
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  position: relative;
  z-index: 9;
  flex-shrink: 0;
  min-height: 40px;
  width: 100%;
  margin: 0;
}

:deep(.el-tabs) {
  flex: 1;
  min-width: 0;
}

:deep(.el-tabs__header) {
  margin: 0;
  border: none;
}

:deep(.el-tabs__nav) {
  border: none;
}

:deep(.el-tabs__item) {
  border: 1px solid transparent;
  margin-right: 4px;
  border-radius: 4px 4px 0 0;
}

:deep(.el-tabs__item.is-active) {
  border-color: #e8e8e8;
  border-bottom: 1px solid #fff;
  background: #fff;
}

.tabs-actions {
  margin-left: 16px;
  flex-shrink: 0;
}

/* 内容区域样式 */
.admin-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: #f0f2f5;
  min-height: 0;
  width: 100%;
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .admin-content {
    padding: 16px;
  }
  
  .header-actions .el-input {
    width: 160px !important;
  }
}

@media (max-width: 992px) {
  .admin-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    height: 100vh;
    transform: translateX(0);
    transition: transform 0.3s ease;
  }
  
  .admin-sidebar.collapsed {
    transform: translateX(-100%);
    width: 256px;
    min-width: 256px;
  }
  
  .admin-header {
    padding: 0 16px;
  }
  
  .header-actions {
    gap: 4px;
  }
  
  .header-actions .el-input {
    width: 120px !important;
  }
  
  .admin-content {
    padding: 16px;
  }
}

@media (max-width: 768px) {
  .admin-tabs {
    padding: 0 8px;
  }
  
  .admin-content {
    padding: 12px;
  }
  
  .header-actions .el-input {
    display: none;
  }
  
  .username {
    display: none;
  }
  
  .header-actions {
    gap: 2px;
  }
}

@media (max-width: 480px) {
  .admin-header {
    padding: 0 8px;
  }
  
  .admin-content {
    padding: 8px;
  }
  
  .header-actions .el-tooltip {
    display: none;
  }
  
  .header-actions .el-tooltip:last-child {
    display: inline-block;
  }
}

/* 防止内容溢出 */
* {
  box-sizing: border-box;
}

.el-breadcrumb {
  overflow: hidden;
}

:deep(.el-breadcrumb__inner) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

/* 深色模式样式 - 优化版 */
.admin-layout.dark-mode {
  background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
}

.admin-layout.dark-mode .admin-sidebar {
  background: linear-gradient(180deg, #16213e 0%, #1a1a2e 100%);
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.3);
  border-right: 1px solid rgba(100, 116, 139, 0.2);
}

.admin-layout.dark-mode .sidebar-header {
  background: linear-gradient(135deg, #16213e 0%, #1e293b 100%);
  border-bottom: 1px solid rgba(100, 116, 139, 0.3);
  position: relative;
}

.admin-layout.dark-mode .sidebar-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 2px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

.admin-layout.dark-mode .admin-header {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border-bottom: 1px solid rgba(100, 116, 139, 0.3);
  color: #f1f5f9;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
}

.admin-layout.dark-mode .admin-content {
  background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);
}

.admin-layout.dark-mode .tabs-container {
  background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
  border-bottom: 1px solid rgba(100, 116, 139, 0.3);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.admin-layout.dark-mode .breadcrumb-nav {
  color: #e2e8f0;
}

.admin-layout.dark-mode .user-dropdown {
  color: #f1f5f9;
  transition: all 0.3s ease;
}

.admin-layout.dark-mode .user-dropdown:hover {
  color: #667eea;
}

.admin-layout.dark-mode .username {
  color: #f1f5f9;
  font-weight: 500;
}

.admin-layout.dark-mode .menu-toggle-btn {
  color: #f1f5f9;
  transition: all 0.3s ease;
}

.admin-layout.dark-mode .menu-toggle-btn:hover {
  color: #667eea;
  background: rgba(102, 126, 234, 0.1);
}

.admin-layout.dark-mode .app-title {
  color: #f1f5f9;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 深色模式下的Element Plus组件 - 增强版 */
.admin-layout.dark-mode :deep(.el-menu) {
  background: linear-gradient(180deg, #16213e 0%, #1a1a2e 100%) !important;
  border-color: rgba(100, 116, 139, 0.2);
}

.admin-layout.dark-mode :deep(.el-menu-item) {
  color: #cbd5e0 !important;
  background: transparent !important;
  transition: all 0.3s ease;
  position: relative;
  margin: 4px 8px;
  border-radius: 8px;
}

.admin-layout.dark-mode :deep(.el-menu-item):hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%) !important;
  color: #f1f5f9 !important;
  transform: translateX(4px);
}

.admin-layout.dark-mode :deep(.el-menu-item.is-active) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  transform: translateX(4px);
}

.admin-layout.dark-mode :deep(.el-menu-item.is-active)::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
}

.admin-layout.dark-mode :deep(.el-sub-menu__title) {
  color: #cbd5e0 !important;
  background: transparent !important;
  transition: all 0.3s ease;
  margin: 4px 8px;
  border-radius: 8px;
}

.admin-layout.dark-mode :deep(.el-sub-menu__title):hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%) !important;
  color: #f1f5f9 !important;
  transform: translateX(4px);
}

.admin-layout.dark-mode :deep(.el-sub-menu.is-opened) > .el-sub-menu__title {
  color: #667eea !important;
}

.admin-layout.dark-mode :deep(.el-input__wrapper) {
  background: linear-gradient(145deg, #374151 0%, #4b5563 100%);
  border: 1px solid rgba(100, 116, 139, 0.4);
  color: #f1f5f9;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.admin-layout.dark-mode :deep(.el-input__inner) {
  color: #f1f5f9;
}

.admin-layout.dark-mode :deep(.el-input__wrapper):hover {
  border-color: rgba(102, 126, 234, 0.6);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(102, 126, 234, 0.3);
}

.admin-layout.dark-mode :deep(.el-tabs__nav-wrap::after) {
  background: rgba(100, 116, 139, 0.3);
}

.admin-layout.dark-mode :deep(.el-tabs__item) {
  color: #cbd5e0;
  transition: all 0.3s ease;
  border-radius: 8px 8px 0 0;
  margin-right: 4px;
}

.admin-layout.dark-mode :deep(.el-tabs__item):hover {
  color: #f1f5f9;
  background: rgba(102, 126, 234, 0.1);
}

.admin-layout.dark-mode :deep(.el-tabs__item.is-active) {
  color: #667eea;
  background: linear-gradient(180deg, rgba(102, 126, 234, 0.1) 0%, transparent 100%);
  position: relative;
}

.admin-layout.dark-mode :deep(.el-tabs__item.is-active)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

.admin-layout.dark-mode :deep(.el-dropdown-menu) {
  background: linear-gradient(145deg, #374151 0%, #4b5563 100%);
  border: 1px solid rgba(100, 116, 139, 0.4);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
}

.admin-layout.dark-mode :deep(.el-dropdown-menu__item) {
  color: #f1f5f9;
  transition: all 0.3s ease;
}

.admin-layout.dark-mode :deep(.el-dropdown-menu__item):hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
  color: #ffffff;
  transform: translateX(4px);
}

.admin-layout.dark-mode :deep(.el-button) {
  color: #cbd5e0;
  border-color: rgba(100, 116, 139, 0.4);
  transition: all 0.3s ease;
}

.admin-layout.dark-mode :deep(.el-button:hover) {
  color: #f1f5f9;
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.admin-layout.dark-mode :deep(.el-breadcrumb__inner) {
  color: #e2e8f0;
  transition: all 0.3s ease;
}

.admin-layout.dark-mode :deep(.el-breadcrumb__inner):hover {
  color: #667eea;
}

.admin-layout.dark-mode :deep(.el-breadcrumb__separator) {
  color: rgba(100, 116, 139, 0.6);
}

/* 特殊动画效果 */
.admin-layout.dark-mode .admin-sidebar {
  position: relative;
  overflow: hidden;
}

.admin-layout.dark-mode .admin-sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  opacity: 0.6;
}

.admin-layout.dark-mode .admin-header {
  position: relative;
  overflow: hidden;
}

.admin-layout.dark-mode .admin-header::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  opacity: 0.6;
}
</style>
